<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>星巴克 | 用每一杯咖啡传递独特的咖啡体验</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" type="text/less" href="./css/home.less">
</head>

<body>
  <!--总容器-->
  <div id="wrapper">
    <!-- 导航条 -->
    <nav id="nav">
      <div class="container-fluid">
        <div class="row d-flex flex-column">
          <div class="d-none d-sm-block d-md-block d-lg-block" id="d-header">
            <!--    header      -->
            <header class="header d-inline-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center">
                <a href="#">
                  <div class="img-l">
                    <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt="">
                  </div>
                </a>
                <ul class="header-ul d-inline-flex" id="header-ul">
                  <li class="mar-1"><a href="">门店</a></li>
                  <li class="mar-1"><a href="">我的账户</a></li>
                  <li class="mar-1"><a href="">菜单</a></li>
                </ul>
              </div>
              <div class="img-r re">
                <img class="open"
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg" alt="">
              </div>
            </header>
          </div>
          <!--    body    -->
          <div class="body mar d-flex flex-column align-items-start justify-content-center">
            <h2 class="body-h2">心情惬意，来杯咖啡吧 ☕</h2>
            <div class="cont mar-2" id="cont">
              <div class="hide d-none d-sm-block d-lg-block d-md-block">
                <a href="" class="d-flex align-items-center">
                  <div class="body-l d-inline-block">
                    <img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg
" alt="">
                  </div>
                  <span>登录</span>
                  <span class="reg mar-1">注册</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="nav-cont">
          <header class="header d-inline-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <a href="#">
                <div class="img-l">
                  <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt="">
                </div>
              </a>
            </div>
            <div class="img-r">
              <img class="close" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-close.svg"
                alt="">
            </div>
          </header>
          <ul class="cont-ul">
            <li>门店</li>
            <li>星享俱乐部</li>
            <li>菜单</li>
            <li>
              <hr>
            </li>
            <li>星巴克移动应用</li>
            <li>星礼卡</li>
            <li>星巴克臻选™</li>
            <li>啡快™ － 在线点 到店取</li>
            <li>专星送™</li>
            <li>咖啡星讲堂</li>
            <li>上海烘焙工坊</li>
            <li>关于星巴克</li>
            <li>帮助中心</li>
            <li>
              <hr>
            </li>
          </ul>
          <div class="cont d-flex mar-2">
            <a href="" class="d-flex">
              <div class="body-l d-inline-block">
                <img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg
" alt="">
              </div>
              <span>登录</span>
            </a>
            <a href="" class="">
              <span class="reg">注册</span>
            </a>
          </div>
          <p>English | 隐私政策 | 使用条款</p>
        </div>
      </div>
    </nav>

    <!-- 主体区域 -->
    <section id="body" class="">
      <div class="container-fluid">
        <div class="row re">
          <div class="ad ab">广告</div>
          <!--  轮播图 大屏  -->
          <div class="carousel d-md-block" id="carousel_one">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_9b62183b-633a-4dc1-a4a6-627a22cca859.png"
                    class="d-block w-100 d-md-block d-lg-block">
                </div>
                <div class="carousel-item">
                  <img
                    src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg"
                    class="d-block w-100 d-md-block d-lg-block">
                </div>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleControls"
                  data-slide="next">
                  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" fill="currentColor"
                    class="bi bi-chevron-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                  </svg>
                  <span class="sr-only">Next</span>
                </button>
              </div>
            </div>
          </div>
          <!-- 小屏幕 -->
          <div class="carousel d-lg-none d-md-none" id="carousel_two">
            <div id="carouselExampleControls_two" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_feb2427d-ca7e-42db-a34e-9ff635006ce3.png">
                </div>
                <div class="carousel-item">
                  <img
                    src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg"
                    class="d-block w-100 d-md-block d-lg-block">
                </div>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleControls_two"
                  data-slide="next">
                  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" fill="currentColor"
                    class="bi bi-chevron-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                  </svg>
                  <span class="sr-only">Next</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!--  3张图片   -->
        <div class="row three fluid pad_5">
          <div class="col-md-4 flex-cent">
            <div class="row-img fluid">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" alt="">
            </div>
          </div>
          <div class="col-md-4 flex-cent">
            <div class="row-img fluid">
              <img
                src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg"
                alt="">
            </div>
          </div>
          <div class="col-md-4 flex-cent">
            <div class="row-img fluid">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-cn.jpg" alt="">
            </div>
          </div>
        </div>
        <!--  文本   -->
        <div class="row context justify-content-md-center align-items-center pad-2">
          <div class="lft col-md-4 col-sm-12">
            <h3>星享俱乐部</h3>
            <p class="p1">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<span class="mar-1">了解更多 ›</span></p>
            <p class="p2"><span>注册</span> <span>登录</span></p>
          </div>
          <div class="rgt col-md-3 col-sm-12">
            <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg" alt="">
          </div>
        </div>
        <!--   精选   -->
        <div class="row Card">
          <div class="container-fluid text-center">
            <h3>星巴克精选</h3>
            <p class="p">在星巴克天猫旗舰店发现更多咖啡心意</p>
            <div class="cardBox d-flex mar-5">
              <div class="card">
                <img
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png"
                  class="card-img-top">
                <div class="card-body">
                  <p class="p1"><strong>会员星礼包</strong></p>
                  <p class="p2">星享卡新升级<br>更多心意好礼</p>
                  <p class="p3">了解更多 ›</p>
                </div>
              </div>
              <div class="card">
                <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-02.png"
                  class="card-img-top">
                <div class="card-body">
                  <p class="p1"><strong>会员星礼包</strong></p>
                  <p class="p2">星享卡新升级<br>更多心意好礼</p>
                  <p class="p3">了解更多 ›</p>
                </div>
              </div>
              <div class="card">
                <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png"
                  class="card-img-top">
                <div class="card-body">
                  <p class="p1"><strong>会员星礼包</strong></p>
                  <p class="p2">星享卡新升级<br>更多心意好礼</p>
                  <p class="p3">了解更多 ›</p>
                </div>
              </div>
              <div class="card">
                <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-reserve.png"
                  class="card-img-top">
                <div class="card-body">
                  <p class="p1"><strong>会员星礼包</strong></p>
                  <p class="p2">星享卡新升级<br>更多心意好礼</p>
                  <p class="p3">了解更多 ›</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--   文化   -->
        <div class="culture">
          <div class="container-fluid text-center">
            <h3>星巴克精选</h3>
            <p class="p">在星巴克天猫旗舰店发现更多咖啡心意</p>
            <div class="carousel-itm">
              <div class="box re">
                <img
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-coffee-cultivation-kv.jpg"
                  class="d-block w-100">
                <span class="ab">咖啡知识</span>
                <p>咖啡的起源于培植</p>
              </div>
              <div class="box re">
                <img
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-4-fundamentals-kv.jpg"
                  class="d-block w-100">
                <span class="ab">咖啡知识</span>
                <p>咖啡的起源于培植</p>
              </div>
              <div class="box re">
                <img
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-roast-story-kv.jpg"
                  class="d-block w-100">
                <span class="ab">咖啡知识</span>
                <p>咖啡的起源于培植</p>
              </div>
              <div class="box re">
                <img
                  src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-pour-over-kv.jpg"
                  class="d-block w-100">
                <span class="ab">咖啡知识</span>
                <p>咖啡的起源于培植</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </section>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <script src="./js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
  <script>
    let menu = document.querySelector('.open')
    let close = document.querySelector('.close')
    let nav_cont = document.querySelector('.nav-cont')
    menu.onclick = () => {
      nav_cont.style.display = 'block'
    }
    close.onclick = () => {
      nav_cont.style.display = 'none'
    }
  </script>
</body>

</html>